<template>
    <div class="collect-button">
        <div class="icon" @click="collectArticle">
            <img
                v-if="value"
                :src="require(`@/assets/icon/collect_active.png`)"
            />
            <img v-else :src="require(`@/assets/icon/collect.png`)" />
        </div>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        },
        pageData: Object
    },
    data() {
        return {};
    },

    methods: {
        collectArticle() {
            console.log(
                "collectArticle",
                this.pageData.articleId,
                this.pageData
            );
        }
    }
};
</script>


<style lang="less" scoped>
.collect-button {
    .icon {
        font-size: 0;
        width: 60px;
        img {
            width: 100%;
        }
    }
}
</style>